Lesson 1: Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML. While HTML provides the structure of a webpage, CSS controls its appearance—colors, fonts, layouts, and more—making the page visually appealing to users.

How CSS Works with HTML

CSS can be applied to HTML in three different ways:

1. Inline CSS: Directly within the HTML element using the style attribute.

   <h1 style="color: blue;">This is an inline CSS example</h1>
2. Internal CSS: Within the <style> tag in the head section of the HTML document.

   <style>
     h1 {
       color: blue;
     }
   </style>
3. External CSS: Using a separate .css file that is linked to the HTML document.

   <link rel="stylesheet" href="styles.css">
   The external method is preferred in professional development because it keeps the structure (HTML) and style (CSS) separate.

CSS Syntax and Selectors

CSS Syntax is the format in which CSS rules are written. A CSS rule has two main parts:

• Selector: Identifies the HTML element to be styled.
• Declaration Block: Contains the style rules inside curly braces {}, which consist of property-value pairs (e.g., color: blue;).

Example:

h1 {
  color: blue;
  font-size: 24px;
}

In this example:

• h1 is the selector.
• color and font-size are properties, and blue and 24px are their respective values.

Common CSS Selectors:

• Type Selector: Selects all elements of a given type (e.g., h1, p).

  p {
    color: green;
  }
• Class Selector: Selects elements with a specific class, prefixed by a dot (.).

  .highlight {
    background-color: yellow;
  }
• ID Selector: Selects an element with a specific ID, prefixed by a hash (#).

  #main-header {
    text-align: center;
  }
• Universal Selector: Selects all elements (*).

  * {
    margin: 0;
    padding: 0;
  }